<script setup lang="ts">
import {ElTabs, ElTabPane, ElIcon, ElButton} from "element-plus";
import {Close} from "@element-plus/icons-vue";
import {ref} from "vue";

const emits = defineEmits(["close"])

const currentComponent = ref()


function closeWindow(){
  emits("close")
}
</script>

<template>
  <div class="container">
    <ElTabs type="border-card" class="custom_tabs">
      <ElTabPane label="User"></ElTabPane>
      <ElTabPane label="Config"></ElTabPane>
      <ElTabPane label="Role"></ElTabPane>
      <ElTabPane label="Task"></ElTabPane>
    </ElTabs>
    <h1>h1hh1h1h</h1>
    <component :is="currentComponent"></component>

    <div class="close" @click="closeWindow">
      <ElButton link>
        <ElIcon size="18"><Close /></ElIcon>
      </ElButton>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container{
  position: relative;
}
.custom_tabs{
  border: none;
}
::v-deep(.custom_tabs > .el-tabs__content){
  padding: 0;
}
.close{
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>